<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

	<title>Space Crack</title>
    <link rel="apple-touch-icon" href="space_icon.png"/>
    <link rel="apple-touch-startup-image" href="space_splash.png" />
	<link rel="stylesheet" href="/jquery/jquery.mobile-1.1.0.css" />

	<script src="/jquery/jquery-1.7.2.js"></script>
	<script src="/jquery/jquery.mobile-1.1.0.js"></script>

<script>
/*
$(document).ready(function () {
	$(window).bind('orientationchange', function() {
		if (window.orientation % 180 == 0) {
			$(document.body).css("-webkit-transform-origin", "").css("-webkit-transform", "");
		} else {
			if (window.orientation > 0) { //clockwise
				$(document.body).css("-webkit-transform-origin", "200px 190px").css("-webkit-transform",  "rotate(-90deg)");
			} else {
				$(document.body).css("-webkit-transform-origin", "280px 190px").css("-webkit-transform",  "rotate(90deg)");
			}
		}
	}).trigger('orientationchange');
});
*/

</script>

<style>

.gameboard {
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: url(gameboard.png);
	background-size: 100%;
}

</style>
</head> 
<body> 

<!-- Start of page: #home -->
<div data-role="page" id="home">

	<div data-role="header" data-position="fixed">
		<h1>Space Crack</h1>
		<a href="#menu" data-role="button" data-rel="dialog" data-transition="pop" data-icon="gear" data-iconpos="notext" class="ui-btn-right">Menu</a>
	</div><!-- /header -->

	<div data-role="content" >

<p>Welcome to Space Crack</p>

<p><a href="#register" data-role="button">Register</a></p>
<p><a href="#games" data-role="button">Active Games</a></p>

	</div><!-- /content -->

	<div data-role="footer" data-position="fixed">
		<h4>username@google.com</h4>
	</div><!-- /footer -->
</div><!-- /page -->



<!-- Start of page: #register -->
<div data-role="page" id="register">

	<div data-role="header" data-position="fixed">
		<h1>Register</h1>
		<a href="#home" data-role="button" data-icon="home" data-iconpos="notext">Home</a>
		<a href="#menu" data-role="button" data-rel="dialog" data-transition="pop" data-icon="gear" data-iconpos="notext">Menu</a>
	</div><!-- /header -->

	<div data-role="content" >

<form action="register.jsp" method="post">
<div data-role="fieldcontain">
    <label for="register_user">Username:</label>
    <input type="text" name="user" id="register_user" value="Phear" />
</div>

<fieldset class="ui-grid-a">
	<div class="ui-block-b"><button type="submit">Register</button></div>
	<div class="ui-block-b"><button type="reset">Cancel</button></div>
</fieldset>
</form>

	</div><!-- /content -->

	<div data-role="footer" data-position="fixed">
		<h4>username@google.com</h4>
	</div><!-- /footer -->
</div><!-- /page -->



<!-- Start of page: #games -->
<div data-role="page" id="games">

	<div data-role="header" data-position="fixed">
		<h1>Games</h1>
		<a href="#home" data-role="button" data-icon="home" data-iconpos="notext">Home</a>
		<a href="#menu" data-role="button" data-rel="dialog" data-transition="pop" data-icon="gear" data-iconpos="notext">Menu</a>
	</div><!-- /header -->

	<div data-role="content" >

		<ul data-role="listview" data-divider-theme="a" data-theme="d">
			<li data-role="list-divider">Games Waiting on You<span class="ui-li-count">2</span></li>
			<li><a href="#game">
				<h3>Ajax's gambit</h3>
				<p class="ui-li-aside">Time to forfeit: <strong>1:34</strong></p>
				<p>Control: <strong>8%</strong></p>
				<p>Players: <strong>Phear</strong>, Ajax, Exoj, Fixxer</p>
			</a></li>
			<li><a href="#game">
				<h3>Exoj's battle</h3>
				<p class="ui-li-aside">Time to forfeit: <strong>1:47</strong></p>
				<p>Control: <strong>15%</strong></p>
				<p>Players: <strong>Phear</strong>, Ajax, Exoj, Fixxer</p>
			</a></li>

			<li data-role="list-divider">Games Waiting on Other Players<span class="ui-li-count">1</span></li>
			<li><a href="#game">
				<h3>Fixxer's game</h3>
				<p class="ui-li-aside">Time to forfeit: <strong>4:48</strong></p>
				<p>Control: <strong>3%</strong></p>
				<p>Players: <strong>Ajax</strong>, Exoj, Fixxer, Phear</p>
			</a></li>

			<li data-role="list-divider">Open Games<span class="ui-li-count">5</span></li>
			<li><a href="#join_game">
				<h3>Tiny Game</h3>
				<p class="ui-li-aside">Waiting for <strong>1</strong> player</p>
				<p>Map size: <strong>Tiny</strong></p>
				<p>Control: <strong>3%</strong></p>
				<p>Players: Player1, Player2</p>
			</a></li>
			<li><a href="#join_game">
				<h3>Small Game</h3>
				<p class="ui-li-aside">Waiting for <strong>1</strong> player</p>
				<p>Map size: <strong>Small</strong></p>
				<p>Players: Player1, Player2, Player3, Player4</p>
			</a></li>
			<li><a href="#join_game">
				<h3>Medium Game</h3>
				<p class="ui-li-aside">Waiting for <strong>3</strong> players</p>
				<p>Map size: <strong>Medium</strong></p>
				<p>Players: Player1, Player2, Player3</p>
			</a></li>
			<li><a href="#join_game">
				<h3>Large Game</h3>
				<p class="ui-li-aside">Waiting for <strong>2</strong> players</p>
				<p>Map size: <strong>Large</strong></p>
				<p>Players: Player1, Player2, Player3, Player4, Player5, Player6, Player7, Player8</p>
			</a></li>
			<li><a href="#join_game">
				<h3>Epic Game</h3>
				<p class="ui-li-aside">Waiting for <strong>8</strong> players</p>
				<p>Map size: <strong>Epic</strong></p>
				<p>Players: Player1, Player2, Player3, Player4, Player5, Player6, Player7, Player8</p>
			</a></li>
		</ul>

	</div><!-- /content -->

	<div data-role="footer" data-position="fixed">
		<h4>Phear</h4>
		<a href="#messages" data-role="button" data-icon="star" data-iconpos="notext" class="ui-btn-left">Messages</a>
		<a href="#" data-role="button" data-icon="back" data-iconpos="notext" class="ui-btn-right">Logout</a>
	</div><!-- /footer -->
</div><!-- /page -->



<!-- Start of page: #game -->
<div data-role="page" id="game">

	<div data-role="header" data-position="fixed" data-fullscreen="true">
		<h1>Ajax's game</h1>
		<a href="#home" data-role="button" data-icon="home" data-iconpos="notext">Home</a>
		<a href="#menu" data-role="button" data-rel="dialog" data-transition="pop" data-icon="gear" data-iconpos="notext">Menu</a>
	</div><!-- /header -->

	<div data-role="content" >

<div class="gameboard">
</div>

	</div><!-- /content -->

	<div data-role="footer" data-position="fixed" data-fullscreen="true">
		<h4>Phear</h4>
		<a href="#messages" data-role="button" data-icon="star" data-iconpos="notext" class="ui-btn-left">Messages</a>
		<a href="#" data-role="button" data-icon="back" data-iconpos="notext" class="ui-btn-right">Logout</a>
	</div><!-- /footer -->
</div><!-- /page -->



<!-- Start of page: #join_game -->
<div data-role="page" id="join_game">

	<div data-role="header" data-position="fixed">
		<h1>Join Game</h1>
		<a href="#home" data-role="button" data-icon="home" data-iconpos="notext">Home</a>
		<a href="#menu" data-role="button" data-rel="dialog" data-transition="pop" data-icon="gear" data-iconpos="notext">Menu</a>
	</div><!-- /header -->

	<div data-role="content" >


	</div><!-- /content -->

	<div data-role="footer" data-position="fixed">
		<h4>Phear</h4>
		<a href="#messages" data-role="button" data-icon="star" data-iconpos="notext" class="ui-btn-left">Messages</a>
		<a href="#" data-role="button" data-icon="back" data-iconpos="notext" class="ui-btn-right">Logout</a>
	</div><!-- /footer -->
</div><!-- /page -->



<!-- Start of page: #settings -->
<div data-role="page" id="settings">

	<div data-role="header" data-position="fixed">
		<h1>Settings</h1>
		<a href="#home" data-role="button" data-icon="home" data-iconpos="notext">Home</a>
		<a href="#menu" data-role="button" data-rel="dialog" data-transition="pop" data-icon="gear" data-iconpos="notext">Menu</a>
	</div><!-- /header -->

	<div data-role="content" >

<form action="settings.jsp" method="post">
<div data-role="fieldcontain">
    <label for="settings_user">Username:</label>
    <input type="text" name="user" id="settings_user" value="Phear" disabled />
</div>
<div data-role="fieldcontain">
    <label for="settings_color">Color:</label>
    <input type="color" name="color" id="settings_color" value="" />
</div>
<div data-role="fieldcontain">
    <label for="settings_sound">Sound:</label>
	<select name="sound" id="settings_sound" data-role="slider">
	<option value="off">Off</option>
	<option value="on">On</option>
	</select>
</div>

<fieldset class="ui-grid-a">
	<div class="ui-block-b"><button type="submit">Save</button></div>
	<div class="ui-block-b"><button type="reset">Cancel</button></div>
</fieldset>
</form>

	</div><!-- /content -->

	<div data-role="footer" data-position="fixed">
		<h4>Phear</h4>
		<a href="#messages" data-role="button" data-icon="star" data-iconpos="notext" class="ui-btn-left">Messages</a>
		<a href="#" data-role="button" data-icon="back" data-iconpos="notext" class="ui-btn-right">Logout</a>
	</div><!-- /footer -->
</div><!-- /page -->



<!-- Start of page: #statistics -->
<div data-role="page" id="statistics">

	<div data-role="header" data-position="fixed">
		<h1>Statistics</h1>
		<a href="#home" data-role="button" data-icon="home" data-iconpos="notext">Home</a>
		<a href="#menu" data-role="button" data-rel="dialog" data-transition="pop" data-icon="gear" data-iconpos="notext">Menu</a>
	</div><!-- /header -->

	<div data-role="content" >

<p>Time: <strong>12 hours</strong></p>
<p>Games joined: <strong>12</strong></p>
<p>Games won: <strong>6</strong> (50%)</p>
<p>Players : <strong>6 (50%)</strong></p>
<p>Systems conquered: <strong>32 systems</strong></p>
<p>Fleets destroyed: <strong>124 fleets</strong></p>

	</div><!-- /content -->

	<div data-role="footer" data-position="fixed">
		<h4>Phear</h4>
		<a href="#messages" data-role="button" data-icon="star" data-iconpos="notext" class="ui-btn-left">Messages</a>
		<a href="#" data-role="button" data-icon="back" data-iconpos="notext" class="ui-btn-right">Logout</a>
	</div><!-- /footer -->
</div><!-- /page -->



<!-- Start of page: #messages -->
<div data-role="page" id="messages">

	<div data-role="header" data-position="fixed">
		<h1>Messages</h1>
		<a href="#home" data-role="button" data-icon="home" data-iconpos="notext">Home</a>
		<a href="#menu" data-role="button" data-rel="dialog" data-transition="pop" data-icon="gear" data-iconpos="notext">Menu</a>
	</div><!-- /header -->

	<div data-role="content" >

<p>Time: <strong>12 hours</strong></p>
<p>Games joined: <strong>12</strong></p>
<p>Games won: <strong>6</strong> (50%)</p>
<p>Players : <strong>6 (50%)</strong></p>
<p>Systems conquered: <strong>32 systems</strong></p>
<p>Fleets destroyed: <strong>124 fleets</strong></p>

	</div><!-- /content -->

	<div data-role="footer" data-position="fixed">
		<h4>Phear</h4>
		<a href="#messages" data-role="button" data-icon="star" data-iconpos="notext" class="ui-btn-left">Messages</a>
		<a href="#" data-role="button" data-icon="back" data-iconpos="notext" class="ui-btn-right">Logout</a>
	</div><!-- /footer -->
</div><!-- /page -->



<!-- Start of page: #menu -->
<div data-role="page" id="menu">

	<div data-role="header">
		<h1>Menu</h1>
	</div><!-- /header -->

	<div data-role="content">

<p><a href="#settings" data-role="button">Settings</a></p>
<p><a href="#statistics" data-role="button">Statistics</a></p>
<p>Version: 0.01</p>

	</div><!-- /content -->
</div><!-- /page -->

</body>
</html>
